<script setup>
import { ref, watch } from 'vue';

const totalCount = ref(100)
const msg = ref('Hello')

const person = ref({
  name: '张三',
  age: 18
})

/**
 * 侦听器第三个参数：配置对象
 *   { immediate: true }               立即触发回调
 *   { deep: true }                    深度侦听对象
 *   { immediate: true, deep: true }   立即触发回调，并且开启深度侦听
 */
// { immediate: true } 在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调
watch(totalCount, (newValue, oldValue) => {
  console.log('✅totalCount', { newValue, oldValue })
}, { immediate: true })

// 如果侦听对象，需要开启深度侦听，参数3 添加 { deep: true }
watch(person, (value) => {
  console.log('person', value)
}, { immediate: true, deep: true })
</script>

<template>
  <!-- 结构 -->
  <h1>{{ totalCount }}</h1>
  <button @click="totalCount++">点击累加</button>
  <button @click="msg += '~'">{{ msg }}</button>
  <p>{{ person }}</p>
  <button @click="person.age++">点击加年龄</button>
</template>

<style scoped>
/* 样式 */
</style>
